<template>
  <div class="top">
    <input type="checkbox" v-model="isAllChecked">全选
  </div>
</template>

<script>
//引入store
import { mapMutations, mapGetters } from 'vuex';

export default {
  name: "CartHeader",

  //把mapMutations里的对应函数放methods方法里
  methods: {
    ...mapMutations(['changeAll'])
  },

  //把mapGetters放computed里
  //把store里的两个对应函数打散，放入该页面的computed对象里
  computed: {
    ...mapGetters(['total', 'selectTotal']),

    //全选按钮
    isAllChecked: {

      //从页面单选按钮出发，判断是否触发全选
      //要判断当前数组长度和数据选中数量是否相等---需要计算生成两个数值(数量,长度)--到getters里写
      get() {
        //比较两个新数值(stote里)，返回数值结果 true或false---影响全选按钮选中状态
        return this.total === this.selectTotal;
      },

      //从全选按钮出发，控制页面单选按钮状态,会修改到list里的选中状态，所以方法写在store的mutations里(修改state数据)
      set(value) {
        this.changeAll(value);
      },

    }

  }


}

</script>

<style>
.top {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: pink;
}

.top>input {
  width: 20px;
  height: 20px;
  margin: 0 20px;
}
</style>
